<template>
	<view class="contain-box u-skeleton">
		<view class="header-box">
			<view class="left">
				<view class="head-img">
					<u-image width="70rpx" height="70rpx" border-radius="35rpx" :src="article_info.avatarimage"><u-loading slot="loading"></u-loading></u-image>
				</view>
				<view class="info">
					<view class="name">{{ article_info.nickname }}</view>
					<view class="tip">
						<span class="tool" v-if="article_info.publish_tool">来自{{ article_info.publish_tool }}</span>
						<span class="tool" v-else>{{article_info.verified_reason}}</span>
					</view>
				</view>
			</view>
			<view class="right">
				<!-- 关注按钮
				<view class="btn">
					<u-icon name="plus" color="#FFFFFF"></u-icon>
					<span class="text">关注</span>
				</view> -->
			</view>
		</view>
		<view class="main-text">
			<u-read-more ref="uReadMore" show-height="110" :toggle="true" :shadow-style="shadowStyle" close-text="更多" text-indent="0" color="#f7931e">
				<rich-text :nodes="article_info.weibocontent"></rich-text>
			</u-read-more>
		</view>
		<!--渲染9宫格 开始-->
		<view class="album_list" v-if="article_info.imgList.length > 0">
			<view class="album_item" v-for="item in article_info.imgList" :key="item.id" v-if="item.id<=8">
				<u-image width="100%" height="100%" @click="imgListPreview(item.id)" :src="item.url">
					<u-loading slot="loading"></u-loading>
				</u-image>
			</view>
		</view>
		<!--渲染9宫格 结束-->

		<view style="clear: both;"></view>
		<!-- 点赞评论转发按钮 -->
		<view class="handle-box">
			<view @click="download()">
				<span class="label"><u-icon name="download"></u-icon></span>
			</view>
		</view>
		<!-- 下载进度条弹窗 -->
		<u-mask :show="isDownloading">
			<view class="warp">
				<u-line-progress style="width: 600rpx" :striped="true" :percent="percent" active-color="#f7931e" :striped-active="true" >
				</u-line-progress>
			</view>
		</u-mask>
	</view>

</template>

<script>
export default {
	name: 'article_box',
	props: {
		article_info: {
			type: Object,
			default: {
				id: 1,
				avatarimage: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3011893491,4249262958&fm=26&gp=0.jpg',
				nickname: '坏人今夜不归来',
				publish_time: '01-15 20:37',
				publish_tool: 'iPhone 12 Pro Max',
				verified_reason:'演员',
				weibocontent: '这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为png格式的正方形图标。',
				imgList: [
					{
						id: 0,
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3011893491,4249262958&fm=26&gp=0.jpg'
					},
					{
						id: 1,
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3011893491,4249262958&fm=26&gp=0.jpg'
					},
					{
						id: 2,
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3011893491,4249262958&fm=26&gp=0.jpg'
					},
					{
						id: 3,
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3011893491,4249262958&fm=26&gp=0.jpg'
					},
					{
						id: 4,
						url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3011893491,4249262958&fm=26&gp=0.jpg'
					}
				],
				comment_num: 321,
				up_num: 1000,
				retweet_num: 1000,
				is_like: 0
			}
		}
	},
	data() {
		return {
			isDownloading: 0,
			percent: 0,
			shadowStyle: {
				backgroundImage: '',
				paddingTop: '',
				marginTop: '20rpx'
			}
		};
	},
	onload() {
		this.$nextTick(() => {
			this.$refs.uReadMore.init();
		});
	},
	methods: {
		//预览图片
		async imgListPreview(index) {
			const urlList = [];
			let imgArr = this.article_info.imgList;
			imgArr.forEach(v => {
				// 换成大图
				let imgUrl = v.url;
				imgUrl = this.changeImgUrl('wap720',imgUrl)
				urlList.push(imgUrl);
			});
			// 保存查看记录
			await this.$u.api.userLookDetail({ weibo_id: this.article_info.id });
			// 预览大图
			uni.previewImage({
				current: urlList[index],
				urls: urlList
			});
		},
		changeImgUrl(size,imgUrl){
			const t_arr = imgUrl.split('/')
			t_arr[3] = size
			imgUrl = t_arr.join('/')
			return imgUrl
		},
		// 改变下载进度
		changePercent(i, imgArr) {
			let num = i + 1;
			let total = imgArr.length;
			let t = (num / total) * 100;
			this.percent = parseInt(t);
			if (this.percent > 100) this.percent = 100;
			if (this.percent < 0) this.percent = 0;
		},
		// 授权处理
		async handleAuthWritePhotosAlbum(){
			const authValue = 'scope.writePhotosAlbum'
			// 得到授权配置值
			const setting = await uni.getSetting()
			const authSetting = setting[1].authSetting
			// 查看授权值
			if(authSetting[authValue]==null || authSetting[authValue]===false){
				// 如果相册未授权，提示并授权
				const authRes = await uni.authorize({scope:'scope.writePhotosAlbum'})
				// 如果已拒绝授权，提示，并打开授权设置
				if(authRes[0]){
					// 打开确认、取消框
					const confirmRes = await uni.showModal({title: '授权提示',content: '允许授权才能保存图片到相册'})
					// 点击确认，打开授权设置
					if(confirmRes[1].confirm===true){
						// 设置授权值
						const settingRes = await uni.openSetting()
						// 如果还没打开授权相册，结束
						if(settingRes[1].authSetting[authValue]===false){
							return false
						}
					}
				}
			}
			return true
		},
		// 下载
		async download() {
			const authRes = await this.handleAuthWritePhotosAlbum()
			console.log('授权结果：'+authRes)
			if(!authRes){
				return false;
			}
			// 显示遮罩层
			this.isDownloading = 1;
			// 请求下载监控接口
			await this.$u.api.userDownload({ weibo_id: this.article_info.id });
			let imgArr = this.article_info.imgList;
			// 循环下载数据
			for (let i = 0; i < imgArr.length; i++) {
				// 循环一次进度增加
				this.changePercent(i, imgArr);
				let imgUrl = imgArr[i].url;
				imgUrl = this.changeImgUrl('large',imgUrl)
				// 远程文件下载到内存
				const downloadRes = await uni.downloadFile({ url: imgUrl });
				if (downloadRes[1]) {
					const { tempFilePath } = downloadRes[1];
					// 将临时文件保存到手机
					const saveRes = await uni.saveImageToPhotosAlbum({ filePath: tempFilePath });
				}
			}
			// 下载成功
			this.isDownloading = 0;
			await uni.showToast({
				title: '已保存到手机相册'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 750rpx;
}

.contain-box {
	color: #222222;
	padding: 20rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	.header-box {
		display: flex;
		.left {
			flex: 1;
			display: flex;
			align-items: center;
			.head-img {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				image {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}
			}
			.info {
				margin-left: 15rpx;
				.name {
					font-size: 32rpx;
					font-weight: 550;
					margin-bottom: 10rpx;
				}
				.tip {
					font-size: 23rpx;
					color: #bfbfbf;
					.tool {
						margin-left: 10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			align-items: center;
			.btn {
				color: #ffffff;
				background: linear-gradient(to right, #ff623e, #fcbc27);
				height: 50rpx;
				border-radius: 25rpx;
				font-size: 25rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				.text {
					margin-left: 8rpx;
				}
			}
		}
	}
	.main-text {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #222222;
	}
	.album_list{
		display: flex;
		flex-wrap: wrap;
		.album_item{
			width: 33.33%;
			height: 31vw;
			border: 4rpx solid #FFFFFF;
		}
	}
	.handle-box {
		display: flex;
		border-top: 1px solid #f2f2f2;
		padding-top: 20rpx;
		view {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			.label {
				margin-right: 10rpx;
			}
		}
	}
}
</style>
